
<template>
    <page-header-wrapper :title="false">
        <a-card :bordered="false">
            <div class="table-page-search-wrapper">
                <a-form layout="inline">
                    <a-row :gutter="16">
                        <!-- <a-col :span="8">
                <a-form-item label="分类名称">
                  <a-input v-model="queryParam.name" placeholder="请输入" />
                </a-form-item>
              </a-col> -->
                        <a-col :span="8" :offset="16" style="text-align: right;">
                            <span class="table-page-search-submitButtons">
                                <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button>
                                <!-- <a-button type="primary" style="margin-left: 8px" @click="handleSearch">查询</a-button>
                  <a-button style="margin-left: 8px" @click="handleReset">重置</a-button> -->
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <s-table ref="table" size="default" bordered :columns="columns" :data="loadData" :pageNum="pageNum" :pageSize="pageSize"
                :scroll="{x: true}"
                rowKey="id">
                <div slot="action" slot-scope="text, record">
                    <a type="primary" :disabled="record.state === 1" @click="handleStatus(record)">激活</a>
                    <a :disabled="record.state === 2" @click="handleStatus(record)" style="margin-left:10px;">冻结</a>
                    <a @click="handleEdit(record)" type="primary" style="margin-left:10px;">更新</a>
                </div>
            </s-table>
        </a-card>
        <create-form ref="createModal" :visible="visible" :loading="confirmLoading" :model="mdl" @cancel="handleCancel"
            @ok="handleOk" />
    </page-header-wrapper>
</template>
  
<script>
import { STable } from '@/components'
import { rewardList as list, rewardFrozen as frozen, rewardActive as active, rewardAdd as add, rewardUpdate as update } from '@/api/base'
import CreateForm from './modules/reward-form'
export default {
    name: 'TableList',
    components: {
        STable,
        CreateForm
    },
    // status 1-激活 2-冻结 3-删除
    data() {
        return {
            queryParam: {},
            pageNum: 1,
            pageSize: 20,
            visible: false,
            mdl: null,
            confirmLoading: false,
            columns: [
                {
                    title: '抽奖名称',
                    dataIndex: 'riName'
                },
                {
                    title: '奖品数量',
                    dataIndex: 'riAmount'
                },
                {
                    title: '已中奖数量',
                    dataIndex: 'riConsume'
                },
                // {
                //     title: '抽奖活动描述',
                //     dataIndex: 'riNote'
                // },
                {
                    title: '累计奖品池数量',
                    dataIndex: 'riCurrentRemain'
                },
                {
                    title: '开始时间',
                    dataIndex: 'riStartDay'
                },
                {
                    title: '结束时间',
                    dataIndex: 'riEndDay'
                },
                {
                    title: '操作',
                    width: 140,
                    dataIndex: 'action',
                    scopedSlots: { customRender: 'action' }
                }
            ]
        }
    },
    created() {
    },
    methods: {
        handleSearch(e) {
            this.$refs.table.refresh()
        },
        handleEdit(record) {
            this.visible = true
            this.mdl = { ...record }
            this.$refs.createModal.getRewardInfoDetail(record.id)
        },
        handleAdd() {
            this.mdl = null
            this.$refs.createModal.fileList = []
            this.$refs.createModal.giftList = []
            this.visible = true
        },
        handleCancel() {
            this.visible = false
            this.$refs.createModal.fileList = []
            this.$refs.createModal.giftList = []
            const form = this.$refs.createModal.form
            form.resetFields() // 清理表单数据（可不做）
        },
        handleReset() {
            this.queryParam = {}
            this.$refs.table.refresh()
        },
        loadData(params) {
            return list(Object.assign(params, this.queryParam)).then(res => {
                return res.data
            })
        },
        handleStatus(row) {
            const { state, id } = row
            this.$confirm({
                title: `您确定要${state === 1 ? '冻结' : '激活'}它吗？`,
                onOk: () => {
                    if (row.state === 1) {
                        frozen([id]).then(() => {
                            this.$message.success('冻结成功')
                            this.$refs.table.refresh()
                        })
                    } else {
                        active([id]).then(() => {
                            this.$message.success('激活成功')
                            this.$refs.table.refresh()
                        })
                    }
                }
            })
        },
        handleOk() {
            const form = this.$refs.createModal.form
            this.confirmLoading = true
            form.validateFields((errors, values) => {
                values.gift = this.$refs.createModal.giftList
                if (!errors) {
                    if (values.id > 0) {
                        // // 修改
                        update(values).then(res => {
                            this.visible = false
                            this.confirmLoading = false
                            // 重置表单数据
                            form.resetFields()
                            if (res.success) {
                                this.$refs.table.refresh()
                                this.$message.info('修改成功')
                                return
                            }
                            this.$message.info('修改失败')
                        },(res) => {
                            this.visible = false
                            this.confirmLoading = false
                        })
                    } else {
                        // 新增
                        add(values).then(res => {
                            this.visible = false
                            this.confirmLoading = false
                            // 重置表单数据
                            form.resetFields()
                            // 刷新表格
                            if (res.success) {
                                this.$refs.table.refresh()
                                this.$message.info('新增成功')
                                return
                            }
                            this.$message.info('新增失败')
                        },(res) => {
                            this.visible = false
                            this.confirmLoading = false
                        })
                    }
                } else {
                    this.confirmLoading = false
                }
            })
        }
    }
}
</script>
  